<template>
	<!-- 下单 -->
	<view class="container u-wrap u-skeleton">
		<view class="table" v-if="tableNumber">
			<text class="">当前桌号：</text><text class="table-number u-skeleton-fillet">{{tableNumber}}</text>
		</view>
		<view class="padT24" v-else>

		</view>
		<view class="u-search-box u-skeleton-fillet" @click="JumpPage('/pages/place-order/search')">
			<view class="u-search-inner">
				<view class="input-container">
					<image src="@/static/images/home/search.png" mode="widthFix"></image>
					<input class="search-input" type="text" v-model="value" placeholder="请输入您想搜的商品" disabled />
				</view>
			</view>
		</view>
		<view class="u-menu-wrap" v-if="loading">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in 3" :key="index" class="u-tab-item ">
					<text class="u-line-1 u-skeleton-fillet">商品分类</text>
				</view>
			</scroll-view>
			<view class="right-box camouflage-skeleton">
				<view class="items" v-for="item in 3" :key="item">
					<view class="image-box u-skeleton-fillet">商品图片</view>
					<view class="value">
						<view class="item u-skeleton-fillet">商品名称</view>
						<view class="item u-skeleton-fillet">商品描述</view>
						<view class="item u-skeleton-fillet">商品价格</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-menu-wrap" v-else>
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="item in gcs" v-if="item.level==1" :key="item.id" class="u-tab-item u-skeleton-fillet"
					:class="[current==item.id ? 'u-tab-item-active' : '']" :data-current="item.id"
					@tap.stop="showCategory(item)">
					<text class="u-line-1 u-skeleton-fillet">{{item.name}}</text>
				</view>
			</scroll-view>
			<block>
				<scroll-view scroll-y class="right-box">
					<!-- <view class="item-title-text" v-if="item">
						<text>{{item.title}}</text>
					</view> -->
					<view class="page-view" v-for="(items,indexs) in goodsList" :key="indexs">
						<view class="class-item">

							<view class="item-container">
								<block v-if="items">
									<view class="thumb-box">

										<!-- <image class="item-menu-image u-skeleton-rect" :src="items.img" mode="widthFix">
										</image> -->
										<u-image class="foods-image-box u-skeleton-rect" width="186" height="186"
											:src="items.goods_img" border-radius="12rpx">
											<view class="img-status-text" slot="loading">
												加载中
											</view>
											<view class="img-status-text" slot="error">
												加载失败
											</view>
										</u-image>
										<view class="item-menu-box">
											<view class="item-menu-name u-skeleton-rect">{{items.goods_name}}</view>
											<view class="item-menu-dosing u-skeleton-rect" v-if="memberCardId && readIndex == 2">主要原料：剩余:{{items.surplus}}
											</view>
											<view class="item-menu-sales u-skeleton-rect"  v-else>月售{{items.number_sales}}
											</view>
											<view class="item-menu-price-box">
												<view class="item-menu-price u-skeleton-rect">
													<view class="">
														<text class="unit">¥</text><text
															class="price">{{items.store_price}}</text>
													</view>
													<view class="number-box"
														v-if="!(items.sku_name&&items.sku_name.length>1)||items['quantity']!=0">
														<view class="minus-btn ufunc-btn" v-show="items['quantity']>0">
															<image src="@/static/images/minus.png" mode="widthFix"
																@click="numberChange('minus',items)">
															</image>
														</view>
														<view class="number" v-show="items['quantity']>0">
															{{items.quantity}}
														</view>
														<view class="add ufunc-btn ">
															<image src="@/static/images/add.png" mode="widthFix"
																@click="numberChange('add',items)">
															</image>
														</view>
													</view>
													<view class="spec" v-else @click="selectSpec(items)">
														选规格
													</view>
												</view>
											</view>
										</view>
									</view>
								</block>
								<block v-else>
									<view class="not-data" style="width:566rpx">
										<view class="img-box">
											<image src="@/static/images/no-data.png" mode="widthFix"></image>
										</view>
										<text class="not-text">暂无数据</text>
									</view>
								</block>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>

		</view>
		<view class="ikhalamu-ebaliwe">
			<view class="have-data data"  v-if="!isAppoint && goodsTotalNumber>0">
				<view class="shopping-cart">
					<view class="shop-number">
						<u-badge class="u-badge" :offset="[0,624]" type="error" :count="goodsTotalNumber"></u-badge>
						<image src="@/static/images/yes-shop.png" mode="widthFix"></image>
					</view>
					<view class="footing">

						合计：<text class="unit">¥ </text><text class="price"
							v-if="goodsTotalPrice>0">{{goodsTotalPrice}}</text>
					</view>
				</view>
				<view class="btn" @click="jiesuan">
					去结算
				</view>
			</view>
			<view class="no-data data" v-else>
				<view class="shopping-cart">
					<view class="shop-number">
						<image src="@/static/images/no-shop.png" mode="widthFix"></image>
					</view>
					<view class="footing">
						未选购商品
					</view>
				</view>
				<view class="btn">
					去结算
				</view>
			</view>
		</view>
 
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {
			goodsClassTreeList,
			goodsList,
			netGetMembercard
		} from '@/api/main.js'
	
		import hxNavbar from '@/components/hx-navbar/hx-navbar.vue';
		import jumpBall from '@/components/hx-jump-ball/hx-jump-ball.vue';
		import hxNumberBox from "@/components/uni-number-box/uni-number-box.vue";
		import hxComment from "@/components/hx-comment/hx-comment.vue";
	
		var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
		export default {
			components: {
				jumpBall,
				hxNavbar,
				hxNumberBox,
				hxComment
			},
			data() {
				return {
					SpecShow: false,
									oauthShow: false,
									loading: true,
									value: '', //搜索商品
									scrollTop: 0, //tab标题的滚动条位置
									current: 0, // 预设当前项的值
									menuHeight: 0, // 左边菜单的高度
									menuItemHeight: 0, // 左边菜单item的高度
									GoodsCategoryList: [],
									isShowText: true,
									specItem: '',
									specActive: '',
									tableNumber: '',
									wxLoginCode: '',
									
					fromtype: 0,//1：开卡 2：消费
					isAppoint: false,
					memberCardId: '',
					showTab: true,
					filterList:[{id:1,name:'项目'},{id:0,name:'产品'},{id:2,name:'卡项'}],
					page:1,
					limit:10,
					totalPage:1,
					readIndex:1,
					//商品列表
					goodsList: [],
					//商品分类信息列表
					gcs: [{
							id: 1,
							name: ''
						} 
					],
	 
					 //购物车商品价格合计
					 goodsTotalPrice: 0,
					 //购物车商品数量合计
					 goodsTotalNumber: 0,
					 //购物车
					 shoppCart: [],
	 
				}
			}, 
			onLoad(options) {
				if(options.fromtype) { 
					this.fromtype = options.fromtype;
				} 
				if(options.isAppoint) {
					this.readIndex = 1 
					this.showTab = false;
					this.isAppoint = true;
				} 
				if(options.type) {
					this.readIndex = options.type 
					this.showTab = false;
				} 
				if(options.memberCardId) {
					this.memberCardId = options.memberCardId 
					this.readIndex = 2
				} 
				 
	
			},
			onShow() {
				let that = this
				console.log("---------------------")
				this.getList(); 
			},
			
			watch:{
				goodsList(nVal){
					setTimeout(() => {
						this.loading = false;
					}, 500)
				},
			},
			onPageScroll(e) {
				let that = this
			},
			onReachBottom() {
				if(this.page >= this.totalPage){
					return
				}
				this.page ++
				this.getList()
			},
			methods: {
				appointIt(id) { 
					uni.setStorageSync('__goodsId', id)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 200)
				},
				search() { 
					this.page = 1
					this.goodsList = []
					this.getList()
				},
				changeTab(item) {
					this.readIndex = item.id
					this.currentId = 0
					this.condition = ''
					this.page = 1
					this.goodsList = []
					this.getList()
				},
			 
				initGoodsClassTree: function() {
	
					var that = this;
					
				},
				getList: function() {
					var that = this;
					
					if(that.memberCardId && that.readIndex == 2) {//会员卡项
						netGetMembercard({
							memberCardId: that.memberCardId
						}).then(res => {
							this.goodsList = []
							var cardData = res.data; 
							console.log(cardData) ; 
							for (var i = 0; i < cardData.projectList.length; i++) {
								var project = cardData.projectList[i]
								project.id = project.goods_id
								var surplus = project.surplus
								project.surplus = surplus;
								project.cardId = cardData.cardId;
		
								if(project.isMultiProj) {
									var multiProjects = JSON.parse(project.multiProjects);
									$(multiProjects).each(function(index, item){
										 item.goods.multPrjId = project.goods_id;
										 item.goods.cardId = cardData.cardId;
										 item.goods.multi = true;
									}); 
									project.multiProjects = multiProjects;
								}
								
								that.goodsList.push(project)  
							}
							
							for (var i = 0; i < cardData.productList.length; i++) {
								var product = cardData.productList[i]
								var surplus = product.surplus;
								product.id = product.goods_id;
								product.surplus = surplus;
								product.cardId = cardData.cardId;
								that.goodsList.push(product)  
							} 
						})
					} else {
						
						let params = {
							page: this.page,
							limit: this.limit,
							goodsclass: that.currentId,
							type: that.readIndex,
							condition: this.condition
						}
						goodsList(params).then(res => { 
							that.goodsList = that.goodsList.concat(res.data.list)
							that.page = res.data.page
							that.totalPage = res.data.totalPage
						})
					}
					
				},
				input_search: function(e) {
					console.log(e)
	
				},
				//导航栏滑动时的操作
				navbarScroll(scroll) {
					let top = scroll.scrollTop
					let that = this
					this.pageScrollTop = scroll.scrollTop
					if (top < 120) {
						if (this.navSearchWidth >= 3) {
							if (top < 3) {
								this.navSearchWidth = 3
								this.navSearchBgOpacity = 0
								this.navSearchColor = '#ffffff'
							} else {
								let n = top * (120 / 100)
								if (n > 100) {
									n = 100
								}
								this.navSearchWidth = n
								this.navSearchBgOpacity = top * (1 / 100)
								this.navSearchColor = '#888888'
							}
	
						}
	
					} else {
						this.navSearchWidth = 100
						this.navSearchBgOpacity = 1
						this.navSearchColor = '#888888'
					}
	
	
				},
				jbMsg(res) {
					let that = this;
	
					that.cartAnimation.matrix(1, 0, 0, 0.7, 0, 7).step({
						duration: 100
					})
					that.cartAnimationData = that.cartAnimation.export();
					//动画在app端有bug，所以必须写延迟才能解决
					setTimeout(function() {
						that.cartAnimation.matrix(1, 0, 0, 1, 0, 0).step({
							duration: 150
						});
						that.cartAnimationData = that.cartAnimation.export();
					}, 100);
				},
	
				swiperChange(index) {
					this.swiperCurrent = index;
					this.swiperCurrentSliderLeft = 70 * index;
				},
				transition({
					detail: {
						dx
					}
				}) {
					// this.$refs.tabs.setDx(dx);
				},
				animationfinish({
					detail: {
						current
					}
				}) {
					/* this.$refs.tabs.setFinishCurrent(current); */
					this.swiperCurrent = current;
					this.current = current;
					this.swiperChange(current);
					this.showFoot = current == 0 && this.showStoreBox != true ? true : false;
	
				},
	
	
				//一级分类点击
				showCategory(item) {
					this.currentId = item.id; 
					this.search();
				},
				//右侧栏滚动
				asideScroll(e) {
					let that = this;
					let scrollTop = Math.round(e.detail.scrollTop);
					let tabs = this.gcs.filter(item => item.top <= scrollTop).reverse();
					if (tabs.length > 0) {
						this.currentId = tabs[0].id;
					}
	
					if (scrollTop > 0) {
						uni.createSelectorQuery().select(".main").fields({
							scrollOffset: true,
							rect: true,
						}, (res) => {
	
							res.top = Math.round(res.top)
							if (res.top > 111) {
								that.navbarScroll({
									scroll: 150
								})
								uni.pageScrollTo({
									duration: 0,
									scrollTop: res.top
								})
	
							}
	
						}).exec()
					}
				},
			 
				//小球跳跃动画
				touchOnAddGoods(ele, data) {
					this.element = [ele, '.cart'];
					this.num++;
				},
				//新增商品计算价格
				addGoodsChange(number, rowData) {
					console.log(this.shoppCart)
					number = Number(number)
					var that = this;
	
					let shoppCart = this.shoppCart;
					let totalPrice = 0;
					let totalNumber = 0;
					let existedGoods = false;
					//检查该商品是否为第一次添加，如果为第二次添加，则直接修改商品数量，并计算出合计
					for (var i in shoppCart) {
						//非第一次添加
						if (shoppCart[i].id == rowData.id) {
							shoppCart[i].count = rowData.count = number;
							shoppCart[i].totalPrice = number * shoppCart[i].store_price
							existedGoods = true;
							break;
						}
					}
					//第一次添加
					if (!existedGoods) {
						rowData.count = number;
						rowData.totalPrice = number * rowData.store_price
						shoppCart.push(rowData);
					}
					//计算总商品数量和总价
					for (var i in shoppCart) {
						//总价
						totalPrice += shoppCart[i].totalPrice
						totalNumber += shoppCart[i].count
	
					}
					//更改商品列表中的已购买数量
					for (let i in that.goodsList) {
						if (that.goodsList[i].id == rowData.id) {
							that.goodsList[i] = rowData
							break;
						}
					}
	
					that.shoppCart = shoppCart;
					if (that.goodsTotalPrice < totalPrice) {
						//更具小球动画延时更改数据
						setTimeout(function() {
							that.goodsTotalPrice = totalPrice
							that.goodsTotalNumber = totalNumber
						}, that.animaTime + 150);
					} else {
						that.goodsTotalPrice = totalPrice
						that.goodsTotalNumber = totalNumber
					}
	
	
				},
	
				//计算每类商品购买的总数
				setLabelNumber() {
					let that = this;
					//计算每一类购买商品的总数量
					for (let j in that.gcs) {
						let n = 0;
						for (var i in that.shoppCart) {
							if (that.shoppCart[i].type_id == that.gcs[j].id) {
								n += that.shoppCart[i].count;
							}
						}
						that.gcs[j].count = n;
					}
				},
	
				//去结算
				jiesuan(res) {
					var that = this;
					uni.setStorage({
							key: 'shoppCart',
							data: that.shoppCart,
							success: function() {
							}
					});
					  
					if(this.fromtype == 1) {
						uni.navigateTo({
							url:'/pagesA/crm/cashier/opencard',
							success:()=>{
								 
								 	console.log('success=======' + this.fromtype)
							} 
						})
						 
					} else {
						uni.navigateTo({
							url:'/pagesA/crm/cashier/consume',
							success:()=>{
								 
								 	console.log('success===2=s===' + this.fromtype)
							} 
						})
					}
				},
				//联系商家
				contact() {
					// uni.showModal({
					// 	title:"电话",
					// 	content:"120"
					// })
					// uni.makePhoneCall({
					// 	phoneNumber: '120' //仅为示例
					// });
				},
	
				showStoreBoxFunc() {
					this.storeInfoBoxHeight = uni.getSystemInfoSync().screenHeight - 136;
					this.$set(this.$data, 'showFoot', false);
					this.showStoreBox = true;
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 0
					})
				},
				hiddenStoreBoxFunc() {
					this.storeInfoBoxHeight = 100;
					this.showStoreBox = false;
					if (this.swiperCurrent == 0) {
						this.$set(this.$data, 'showFoot', true);
					}
				},
	
				mpClear(e) {
					// TODO nvue 取消冒泡
					e.stopPropagation()
				},
	
				//显示购物车
				showShoppingCar() {
					if (this.goodsTotalNumber == 0) {
						return;
					}
					this.footHeight = '100%';
					this.showCar = true;
					this.carGoodsScrollTop = 0;
				},
				//隐藏购物车
				hideShoppingCar() {
					this.footHeight = '0';
					this.showCar = false;
				},
				//清空该门店的购物车
				clearShoppingCart() {
					let that = this;
					that.shoppCart = [];
					that.storeData.shoppingCart = [];
					for (let i in that.shoppingCartAll) {
						if (that.shoppingCartAll[i].storeId == that.storeData.storeId) {
							that.shoppingCartAll[i] = that.storeData
						}
					}
					uni.setStorageSync(that.shoppingCartStorageName, that.shoppingCartAll);
	
					for (let i in that.goodsList) {
						that.goodsList[i].count = 0;
					}
					for (let i in that.gcs) {
						that.gcs[i].count = 0;
					}
					//购物车商品价格合计
					that.goodsTotalPrice = 0;
					//购物车商品数量合计
					that.goodsTotalNumber = 0;
					that.hideShoppingCar();
				},
				//拨打电话
				goCall(phone) {
					if (!phone) {
						return;
					}
					uni.makePhoneCall({
						phoneNumber: phone //仅为示例
					});
				},
	
				touchStart(e) {
	
					this.touchData.clientX = e.changedTouches[0].clientX;
	
					this.touchData.clientY = e.changedTouches[0].clientY;
				},
				touchEnd(e) {
	
					const subX = e.changedTouches[0].clientX - this.touchData.clientX;
					const subY = e.changedTouches[0].clientY - this.touchData.clientY;
					if (subY > 50 || subY < -50) {
						if (subY > 50) {
							//console.log('下滑')
							if (this.pageScrollTop == 0) {
								//this.showStoreBox=true;
	
							}
						} else if (subY < -50) {
							//console.log('上滑')
							this.showStoreBox = false;
						} else {
							//console.log('上下滑无效')
						}
	
					} else {
						if (subX > 100) {
							//console.log('右滑')
						} else if (subX < -100) {
							//console.log('左滑')
						} else {
							//console.log('左右滑无效')
						}
					}
				}
			}
		}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: white;
	}

	.table {
		width: 100%;
		height: 96rpx;
		text-align: center;
		font-size: 30upx;
		color: #777777;

		.table-number {
			height: 96rpx;
			line-height: 96rpx;
			font-size: 40upx;
			color: #FF7250;
		}
	}

	.padT24 {
		padding-top: 24rpx;
	}

	.u-search-box {
		width: 700rpx;
		height: 60rpx;
		margin: 0 auto;
		background-color: #F4F4F4;
		border-radius: 30rpx;
		padding-left: 28rpx;
		box-sizing: border-box;

		.u-search-inner {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.input-container {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.search-input {
					font-size: 26upx;
				}
			}

			.btn {
				width: 124rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 28upx;
				color: white;
				background-color: #FF7250;
				border-radius: 30rpx;
			}

		}
	}

	.u-wrap {
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		display: flex;
		flex-direction: column;
	}


	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		min-width: 180rpx !important;
		max-width: 180rpx !important;
		height: 100%;
		background-color: #F8F8F8;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid #FF7250;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.ikhalamu-ebaliwe {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFF1EE;


		.data {
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.shopping-cart {
				display: flex;
				align-items: center;
			}

			.shop-number {
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.footing {
				font-size: 24upx;
				color: #777777;
				margin-left: 30rpx;
			}

			.btn {
				width: 184rpx;
				height: 64rpx;
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 30upx;
				background-color: #AAAAAA;
				color: white;
			}

			&.have-data {
				.footing {
					font-size: 24upx;
					color: #333333;
					display: flex;
					white-space: nowrap;
					align-items: flex-end;
					line-height: 10rpx;

					.unit {
						color: #FF7250;
					}

					.price {
						font-size: 36upx;
						color: #FF7250;
					}
				}

				.btn {
					background-color: #FF7250;
				}
			}
		}
	}

	// 微信小程序不支持组件添加骨架屏 弄个假的兼容
	.camouflage-skeleton {
		width: 100%;

		.items {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			margin-left: 20rpx;

			.image-box {
				width: 186rpx;
				height: 186rpx;
				margin-right: 16rpx;
			}

			.value {
				.item {
					width: 312rpx;
					height: 50rpx;
					font-size: 28upx;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
		}
	}


	.thumb-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.right-box {
		background-color: rgb(255, 255, 255);
		margin-bottom: 100rpx;

		.item-title-text {
			font-size: 26rpx;
			color: $u-main-color;
			font-weight: bold;
			margin: 24rpx 0 0 24rpx;
		}
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.foods-image-box {
		width: 186rpx;
		height: 186rpx;
	}

	.img-status-text {
		font-size: 24upx;
	}

	.item-menu-box {
		margin-left: 16rpx;

		view {
			margin-top: 10rpx;

			&:frist-child {
				margin-top: 0;
			}
		}

		.item-menu-name {
			font-size: 28upx;
			font-weight: bold;
		}

		.item-menu-dosing {
			width: 312rpx;
			font-size: 24upx;
			color: #777777;
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-menu-sales {
			font-size: 22upx;
			color: #AAAAAA;
		}

		.item-menu-price {
			color: #FF7250;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.unit {
				font-size: 26upx;
			}

			.price {
				font-size: 32upx;
			}

			.number-box {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 0;

				.ufunc-btn {
					width: 44rpx;
					height: 44rpx;

					image {
						width: 44rpx;
						height: 44rpx;

					}
				}

				.number {
					height: 44rpx;
					line-height: 50rpx;
					margin: 0 30rpx;
				}
			}

			.spec {
				line-height: 44rpx;
				border: 1px solid #FF7250;
				border-radius: 22rpx;
				padding: 0 14rpx;
			}
		}
	}

	.not-data {
		width: 100rpx;
		text-align: center;

		.img-box {
			width: 294rpx;
			height: 294rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;

			image {
				width: 294rpx;
				height: 294rpx;
			}
		}

		.not-text {
			font-size: 26upx;
			color: #333333;
		}
	}

	.spec-popup-box {
		width: 700rpx;
		min-height: 200rpx;
		margin: 0 auto;
		padding: 28rpx;

		.close-btn {
			position: absolute;
			right: 28rpx;
		}

		.goods-name {
			font-size: 36upx;
			font-weight: bold;
		}

		.spec-box {
			margin-top: 4rpx;
			padding: 24rpx 0;

			.title {
				font-size: 26upx;
				color: #777777;
			}

			.spec-item {
				display: flex;
				align-items: center;

				.item {
					width: 108rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 28upx;
					color: #333333;
					border: 1px solid #E5E5E5;
					border-radius: 8rpx;
					margin: 16rpx 40rpx 16rpx 0;

					&.active {
						border-color: #FF7250;
						color: #FF7250;
						background-color: #FFF1EE;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total-price {
				display: flex;
				align-items: center;

				.label {
					font-size: 26upx;
					color: #333333;
				}

				.total {
					margin-left: 30rpx;

					.price {
						font-size: 44upx;
					}
				}
			}

			.sure-btn {
				width: 158rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				background-color: #FF7250;
				color: white;
				border-radius: 8rpx;
			}
		}
	}
</style>
